<template>
	<!-- 广告栏 -->
	<swiper class="swiper" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00cf5d" autoplay="true"
		interval="3000">
		<swiper-item class="swiper-item" v-for="item in bannerData" :key="item.id">
			<image class="swiper-item-img" mode="widthFix" :src="item.banner_url"></image>
		</swiper-item>
	</swiper>

	<!-- 导航栏 -->
	<view class="box tab">
		<navigator class="nav" hover-class="none" open-type="navigate" url="/pages/guidance/guidance">
			<image mode="widthFix" class="nav-image" src="/static/img/home/nav1.svg"></image>
			<text class="nav-text">就业指导</text>
		</navigator>

		<navigator class="nav" hover-class="none" open-type="switchTab" url="/pages/jobs/jobs">
			<image mode="widthFix" class="nav-image" src="/static/img/home/nav2.svg"></image>
			<text class="nav-text">招聘岗位</text>
		</navigator>

		<navigator class="nav" hover-class="none" open-type="navigate" url="/pages/recode/recode">
			<image mode="widthFix" class="nav-image" src="/static/img/home/nav3.svg"></image>
			<text class="nav-text">投递记录</text>
		</navigator>

		<navigator class="nav" hover-class="none" open-type="switchTab" url="/pages/mine/mine">
			<image mode="widthFix" class="nav-image" src="/static/img/home/nav4.svg"></image>
			<text class="nav-text">账户管理</text>
		</navigator>
	</view>

	<!-- 直播列表 -->
	<view class="box">
		<view class="flex-center">
			<text class="title font-weight">招聘直播</text>
			<text class="more">更多</text>
			<image mode="widthFix" class="more-btn" src="/static/img/common/more.svg"></image>
		</view>
		<scroll-view scroll-x="true" class="scroll-view">
			<view class="scroll-item" v-for="item in scrollBarData" :key="item.id">
				<navigator hover-class="none">
					<image mode="widthFix" class="scroll-item-img" :src="item.live_pic"></image>
					<view :class="item.status==2?'time timeActive':'time'">
						{{item.live_time}}
					</view>
					<view class="topic">
						{{item.live_name}}
					</view>
				</navigator>
			</view>
		</scroll-view>
	</view>

	<!-- 通知公告栏 -->
	<view class="box">
		<view class="flex-center">
			<text class="title font-weight">通知公告</text>
			<text class="more">更多</text>
			<image mode="widthFix" class="more-btn" src="/static/img/common/more.svg"></image>
		</view>
		<view class="newsList" v-for="item in noticeData" :key="item.id">
			<view class="title" @tap="showNewsDetail(item.title,item.content)">
				<image mode="widthFix" class="title-icon" src="/static/img/home/tzgg.svg"></image>
				<text>{{item.title}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		req
	} from '/hooks/req.js'
	import {
		ref,
		inject
	} from 'vue'
	const $root = inject('$root')
	const bannerData = ref([])
	const scrollBarData = ref([])
	const noticeData = ref([])

	// 请求广告图数据
	req($root + `/banner/get/`)
		.then(result => {
			if (result.data.code == 200) {}
			bannerData.value = result.data.data
		})

	// 请求直播列表数据
	req($root + `/live/get/`)
		.then(result => {
			if (result.data.code == 200) {}
			scrollBarData.value = result.data.data
		})

	//请求通知公告数据
	req($root + `/notice/`)
		.then(result => {
			if (result.data.code == 200) {}
			noticeData.value = result.data.data.data
		})

	//展示公告详情
	const showNewsDetail=(tit,con)=>{
		uni.showModal({
			title:tit,
			content:con,
			showCancel:false,
			confirmColor:"#ee6666"
		})
	}
</script>

<style scoped>
	/* 广告栏自适应效果 */
	.swiper {
		width: 100%;
		height: calc(750rpx*56/128);
	}

	.swiper-item-img {
		width: 100%;
	}

	/* 导航栏 */
	.tab {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding: 15px;
		box-sizing: border-box;
	}

	.nav {
		width: 25%;
		text-align: center;
	}

	.nav-image {
		width: 100rpx;
	}

	.nav-text {
		white-space: nowrap;
		text-align: center;
	}

	/* 滚动栏 */
	.scroll-view {
		height: 20prx;
		white-space: nowrap;
		margin-top: 15px;
	}

	.scroll-item {
		display: inline-block;
		width: 186rpx;
		height: 260rpx;
		text-align: center;
		border-radius: 8px;
		margin-right: 8px;
		position: relative;
		overflow: hidden;
	}

	.scroll-item-img {
		width: 100%
	}

	.topic {
		width: 100%;
		height: 30px;
		padding: 4px;
		line-height: 30px;
		color: white;
		background: rgba(48, 48, 48, 0.4);
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.time {
		position: absolute;
		width: 54px;
		text-align: center;
		padding: 4px;
		border-radius: 4px;
		color: rgb(255, 255, 255);
		top: 0;
		left: 0;
		background: rgba(48, 48, 48, 0.4);
	}

	.timeActive {
		color: white;
		background: rgba(252, 70, 24, 0.85);
	}

	.news {
		margin: 5px 0px 5px 25px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.newsList {
		border-bottom: 1px dashed #e8e8e8;
		margin-top: 15px;
	}
</style>